<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : Reckoning
Description: A two-column, fixed-width design for 1024x768 screen resolutions.
Version    : 1.0
Released   : 20090629

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Reckoning by Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>

<p id="notice"><%= notice %></p>
<div id="header" id="title">
<p style="font-family: Times New Roman, serif; font-size: 45pt; padding-top: 17px;">Power Analysis</p>
</div>

<div id="graph_display" data-remote=true>

</div>

<div id="container">
<script type="text/javascript">
		

    	
			Highcharts.setOptions({
				global: {
					useUTC: true
				}
			});
			function requestData(){
				$.ajax({
       				url: "/points",
       				success: function(point){
       			   		var series = chart.series[0],
       			   			shift = series.data.length > 20;
       			   			
       			   		chart.series[0].addPoint([Date.UTC(point[0][0],point[0][1],point[0][2],point[0][3],point[0][4]), point[1]], false, shift);
       			   		
       			   		chart.series[1].addPoint([Date.UTC(point[0][0],point[0][1],point[0][2],point[0][3],point[0][4]),point[2]], false, shift);
       			   		
       			   		chart.series[2].addPoint([Date.UTC(point[0][0],point[0][1],point[0][2],point[0][3],point[0][4]),point[3]], true, shift);
       			   		
       			   		setTimeout(requestData, 1000);
       			   	    //alert(point);
      				},
        			error: function(jqXHR, textStatus, errorThrown){
         			    alert(jqXHR + textStatus + errorThrown);
      				},
      				cache: false
    			});
			}			
			var chart;
			$(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'container',
						defaultSeriesType: 'spline',
						marginRight: 10,
						events: {
							load: requestData
						}
					},
					colors: [
							'#4572A7',
							'#89A54E',
							'#AA4643'
					],
					title: {
						text: 'ILMS data'
					},
					xAxis: {
						tickPixelInterval: 150,
						type: 'datetime'
					},
					yAxis: {
						title: {
							text: 'Power Kw'
						},
						plotLines: [{
							value: 0,
							width: 1,
							color: '#808080'
						}]
					},
					tooltip: {
						formatter: function() {
				                return '<b>'+ this.series.name +'</b><br/>'+
								Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+ 
								Highcharts.numberFormat(this.y, 2);
						}
					},
					legend: {
						enabled: true
					},
					exporting: {
						enabled: false
					},
					series: [{
						name: 'Power Consumption',
						data: []
					},{
						name: 'Green Power',
						data: []
					},{
						name: 'Money Spent',
						type: 'area',
						data: []
					}]
				});
				
			});
				
		</script>
		
	</head>
	
		
		<!-- 3. Add the container -->
		</div>
		
				
	
<!--
<div>	
<h2>Money Saved</h2>
<table>

	<tr>
		<td>
			
		</td>
	</tr>
</table>
</div>
-->

<div id="footer">
<%= link_to 'Home Page  ', main_path %> |
<%= link_to 'Dashboard  ', dashboard_path %>
</div>

</body>
</html>